Add `/browserconfig.xml` file and tile images #1481

alrra · 2013-12-12T23:15:26Z

By default, starting with IE11 on Windows 8.1, IE will request the /browserconfig.xml file when a user clicks/touches the pin site button (same as Safari for iOS does with the apple-touch-icons when the user touches the share button ).

What tiles look like

Adding /browserconfig.xml and the tile images:

reduces the number of 404s, especially as IE11 on Windows 8.1 gets more market share
provides a starting point for dealing with Windows tiles
reminds users about the tile images, so that their website doesn't end up having as a tile the default IE11 logo, or (if the favicon is 32×32px or bigger and not .ico) the website's favicon
unlike using <meta> tags, offers a way that doesn't increase the page size

Only two images are provided since:

tile.png (558×558px) - can be used for the Small, Medium, and Large tiles, being automatically resized where necessary
tile-wide.png (558×270px) - can be used for the Wide tile as, in this case, resizing the 558×558px image would just end up looking weird

The two images are 558×558px and 558×270px because those are the recommended image sizes in order for the tiles to look good on a wide range of devices.

For more in depth information, please refer to the MSDN documentation:

Note(s):

from my tests, the /browserconfig.xml file seems to be requested even if the tile images are specified in the html page:

<meta name="msapplication-TileColor" content="#000"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>

the /browserconfig.xml file and the title images are also requested when the user clicks/touches the add to favorites button:

mathiasbynens · 2013-12-13T08:26:06Z

+1

It sucks we have to add yet another “magic file” in the root (+ the images if you choose to add them), but there are just too many downsides if we don’t.

jonrandahl · 2013-12-13T10:56:08Z

+1 but I also agree with Mathias! ;-)

Jon goes off to make another note to find the time to reconfigure the H5BP-Multi-Layer-FavIcons !

xeniun · 2013-12-13T16:55:15Z

+1
I don't like this kind of customizations but in this case I think it's better than none too.

drublic · 2013-12-15T13:44:46Z

This adds three more files to the root directory which is pretty much I think. What are the downside of placing the tile images in a separate directory?
Another idea is to reuse the square as apple touch icon. But I think we don't want to provide a far to big icon for iOS users to download.

mathiasbynens · 2013-12-15T18:40:43Z

The annoying browserconfig.xml file must be in the root, but at least the images can be moved elsewhere if need be. AFAIK no requests are made to e.g. /tile.png by default.

alrra · 2013-12-15T22:38:32Z

Another idea is to reuse the square as apple touch icon.

@drublic The reason why I haven't reused the apple-touch-icon as the square tile is because I consider that it would be very confusing, plus, as you pointed out: "we don't want to provide a far to big icon for iOS users to download.".

What are the downside of placing the tile images in a separate directory?

@drublic AFAIK, no real downsides (just a few extra bytes in browserconfig.xml).

I've placed the tile images in the root because I thought:

people are already used to the idea of having the *icons in the root and it would be easier for them to immediately guess what those images might be for or where they might be placed
it doesn't require users to update /browserconfig.xml if they use a different name for the image directory or when they rename it (and maybe forget about /browserconfig.xml)

Updates:

removed <TileColor>#000</TileColor> from /browserconfig.xml because it isn't needed, as the default tiles aren't transparent
provided screenshot

pzi · 2013-12-16T05:58:55Z

Do Windows Phones use the same file?

alrra · 2013-12-16T07:53:33Z

Do Windows Phones use the same file?

@pzi:

in theory, they should, hence the phrase:

Note To cover a wide range of devices, use an image 1.8 times the standard tile size so the image can be scaled up or down as needed.
don't know if Windows 8.1 is yet available for Windows Phones (or if there are Windows Phones running 8.1 at this moment)

pzi · 2013-12-17T06:54:04Z

@alrra Yeah, I saw that phrase but I was wondering if there are any test cases / more information around it (only had a quick look around myself).

The other thing is that IE11 is not yet available on the phone afaik.

drublic · 2013-12-26T12:29:42Z

@alrra I'm good with leaving the tile icons in the root directory.

Looks good to me now. We should ship it (with the other relevant changes) :)

koistya · 2014-01-12T20:12:05Z

I personally lean towards having icons inside 'img' or 'icons' folder, less files in the root => less distractions.

Ref: h5bp/html5-boilerplate#1481.

By default, starting with IE11 on Windows 8.1, IE will request the `/browserconfig.xml` file when a user clicks/touches the `pin site` button (same as Safari for iOS does with the `apple-touch-icons` when the user touches the `share` button). Adding the `/browserconfig.xml` file and the tile images: * reduces the number of 404s, especially as IE11 on Windows 8.1 gets more market share * provides a starting point for dealing with Windows tiles * reminds users about the tile images, so that their website doesn't end up having as a tile the default IE11 logo, or (if the favicon is 32×32px or bigger and not `.ico`) the website's favicon * unlike using `<meta>` tags, offers a way that doesn't increase the page size Only two images are provided since: * `tile.png` (558×558px) - can be used for the `Small`, `Medium`, and `Large` tiles, being automatically resized where necessary * `tile-wide.png` (558×270px) - can be used for the `Wide` tile as, in this case, resizing the 558×558px image would just end up looking weird The two images are 558×558px and 558×270px because those are the recommended image sizes in order for the tiles to look good on a wide range of devices. For more in depth information, please refer to the MSDN documentation: * http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx * http://msdn.microsoft.com/en-us/library/ie/dn255024.aspx Close #1481.

alrra · 2014-02-18T22:14:01Z

Thanks for the feedback everyone!

drublic · 2014-02-19T07:46:03Z

Nice work, thanks @alrra.

FlashJunior · 2014-02-21T09:59:13Z

Is there a Demo-Page? i tried http://html5boilerplate.com/ but that did not work :-/

but if i use <meta name="msapplication-config" content="/browserconfig.xml" /> it works perfectly.

alrra · 2014-02-21T10:28:14Z

i tried http://html5boilerplate.com/ but that did not work :-/

@FlashJunior works for me, can you provide more information?

...
IP - - [21/Feb/2014:03:03:41 -0800] "GET / HTTP/1.1" 200 3299 "-" "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko" 
IP - - [21/Feb/2014:03:03:41 -0800] "GET /css/main.cb0a846.css HTTP/1.1" 200 2580 "http://html5boilerplate.com/" "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko" 
IP - - [21/Feb/2014:03:03:43 -0800] "GET /favicon.ico HTTP/1.1" 200 711 "-" "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko" 
...
// pin button is clicked
IP - - [21/Feb/2014:03:03:44 -0800] "GET /browserconfig.xml HTTP/1.1" 200 602 "-" "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko" 
IP - - [21/Feb/2014:03:03:45 -0800] "GET /tile.png HTTP/1.1" 200 14082 "-" "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko" 
IP - - [21/Feb/2014:03:03:45 -0800] "GET /tile-wide.png HTTP/1.1" 200 7095 "-" "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko"

Is there a Demo-Page?

@FlashJunior yes, http://demo.html5boilerplate.com/

FlashJunior · 2014-02-21T12:39:07Z

it's also not working @ http://demo.html5boilerplate.com/

without metatag (http://demo.html5boilerplate.com/):

with metatag (local project):

Testmachine: Windows 8.1 Pro

stevenosloan · 2014-02-21T16:40:46Z

I have it working on http://demo.html5boilerplate.com, but not locally. I found that removing the "X-UA-Compatible" meta tag did the trick.

alrra · 2014-02-21T17:12:24Z

@FlashJunior After clicking the the pin button multiple time, I was able to kinda reproduce that. It seams to me that IE11 doesn't always use the tile images (although, looking at the logs, the /browserconfig.xml file is still requested every time):

I think this is may be a problem with IE11, so I've filed a bug.

FlashJunior · 2014-02-21T22:30:23Z

thx. i use <meta name="msapplication-config" content="/browserconfig.xml" /> until it's fixed.

By default, starting with IE11 on Windows 8.1, IE will request the `/browserconfig.xml` file when a user clicks/touches the `pin site` button (same as Safari for iOS does with the `apple-touch-icons` when the user touches the `share` button). Adding the `/browserconfig.xml` file and the tile images: * reduces the number of 404s, especially as IE11 on Windows 8.1 gets more market share * provides a starting point for dealing with Windows tiles * reminds users about the tile images, so that their website doesn't end up having as a tile the default IE11 logo, or (if the favicon is 32×32px or bigger and not `.ico`) the website's favicon * unlike using `<meta>` tags, offers a way that doesn't increase the page size Only two images are provided since: * `tile.png` (558×558px) - can be used for the `Small`, `Medium`, and `Large` tiles, being automatically resized where necessary * `tile-wide.png` (558×270px) - can be used for the `Wide` tile as, in this case, resizing the 558×558px image would just end up looking weird The two images are 558×558px and 558×270px because those are the recommended image sizes in order for the tiles to look good on a wide range of devices. For more in depth information, please refer to the MSDN documentation: * http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx * http://msdn.microsoft.com/en-us/library/ie/dn255024.aspx Close h5bp#1481.

By default, starting with IE11 on Windows 8.1, IE will request the `/browserconfig.xml` file when a user clicks/touches the `pin site` button (same as Safari for iOS does with the `apple-touch-icons` when the user touches the `share` button). Adding the `/browserconfig.xml` file and the tile images: * reduces the number of 404s, especially as IE11 on Windows 8.1 gets more market share * provides a starting point for dealing with Windows tiles * reminds users about the tile images, so that their website doesn't end up having as a tile the default IE11 logo, or (if the favicon is 32×32px or bigger and not `.ico`) the website's favicon * unlike using `<meta>` tags, offers a way that doesn't increase the page size Only two images are provided since: * `tile.png` (558×558px) - can be used for the `Small`, `Medium`, and `Large` tiles, being automatically resized where necessary * `tile-wide.png` (558×270px) - can be used for the `Wide` tile as, in this case, resizing the 558×558px image would just end up looking weird The two images are 558×558px and 558×270px because those are the recommended image sizes in order for the tiles to look good on a wide range of devices. For more in depth information, please refer to the MSDN documentation: * http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx * http://msdn.microsoft.com/en-us/library/ie/dn255024.aspx Ref: h5bp/html5-boilerplate#1481.

toolz0 · 2014-03-29T00:45:40Z

When I see an industry standard for browsers on W3C that includes browserconfig.xml, I will then implement it.

FlashJunior · 2014-06-13T09:39:52Z

I updated my VM Win 8.1 with IE 11.0.9. Still not working without Meta-Tag :-/

alrra · 2014-06-13T10:59:54Z

Last update from Microsoft was:

Ref #1554 #1639

ghost assigned alrra Jan 13, 2014

alrra added a commit to h5bp/html5boilerplate.com that referenced this pull request Jan 26, 2014

Add /browserconfig.xml and tile images

55709c9

Ref: h5bp/html5-boilerplate#1481.

alrra removed awaiting feedback labels Feb 18, 2014

alrra closed this in 80530d6 Feb 18, 2014

alrra deleted the browserconfig.xml branch February 18, 2014 22:15

briankoser mentioned this pull request Feb 19, 2014

browserconfig.xml briankoser/kotangent-jekyll#39

Open

alrra mentioned this pull request Mar 29, 2014

Scanner fails to acknowledge the case when the /browserconfig.xml file is provided MicrosoftEdge/static-code-scan#47

Closed

alrra referenced this pull request in andrew/first-pr May 24, 2014

Such wow, many favicon, very website

2277379

drublic mentioned this pull request Jul 9, 2014

Change directory tile files and add metatags links #1556

Closed

alrra mentioned this pull request Nov 8, 2014

Look into adding a web application manifest file #1629

Closed

10 tasks

alrra mentioned this pull request Nov 24, 2014

Please, add information about files: tile.png and tile-wide.png #1639

Closed

alrra referenced this pull request Dec 22, 2014

Docs: add info on browserconfig.xml and tile images

001a6c9

Ref #1554 #1639

alrra mentioned this pull request Feb 11, 2015

Favicon test from realfavicongenerator.net #1670

Closed

alrra added the icons label Apr 21, 2015

alrra mentioned this pull request Apr 21, 2015

Remove browserconfig.xml and the tile images #1697

Closed

alrra mentioned this pull request Oct 13, 2015

Added <TileColor> tag and recommended image sizes #1728

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `/browserconfig.xml` file and tile images #1481

Add `/browserconfig.xml` file and tile images #1481

alrra commented Dec 12, 2013

mathiasbynens commented Dec 13, 2013

jonrandahl commented Dec 13, 2013

xeniun commented Dec 13, 2013

drublic commented Dec 15, 2013

mathiasbynens commented Dec 15, 2013

alrra commented Dec 15, 2013

pzi commented Dec 16, 2013

alrra commented Dec 16, 2013

pzi commented Dec 17, 2013

drublic commented Dec 26, 2013

koistya commented Jan 12, 2014

alrra commented Feb 18, 2014

drublic commented Feb 19, 2014

FlashJunior commented Feb 21, 2014

alrra commented Feb 21, 2014

FlashJunior commented Feb 21, 2014

stevenosloan commented Feb 21, 2014

alrra commented Feb 21, 2014

FlashJunior commented Feb 21, 2014

toolz0 commented Mar 29, 2014

FlashJunior commented Jun 13, 2014

alrra commented Jun 13, 2014

Add /browserconfig.xml file and tile images #1481

Add /browserconfig.xml file and tile images #1481

Conversation

alrra commented Dec 12, 2013

mathiasbynens commented Dec 13, 2013

jonrandahl commented Dec 13, 2013

xeniun commented Dec 13, 2013

drublic commented Dec 15, 2013

mathiasbynens commented Dec 15, 2013

alrra commented Dec 15, 2013

pzi commented Dec 16, 2013

alrra commented Dec 16, 2013

pzi commented Dec 17, 2013

drublic commented Dec 26, 2013

koistya commented Jan 12, 2014

alrra commented Feb 18, 2014

drublic commented Feb 19, 2014

FlashJunior commented Feb 21, 2014

alrra commented Feb 21, 2014

FlashJunior commented Feb 21, 2014

stevenosloan commented Feb 21, 2014

alrra commented Feb 21, 2014

FlashJunior commented Feb 21, 2014

toolz0 commented Mar 29, 2014

FlashJunior commented Jun 13, 2014

alrra commented Jun 13, 2014

Add `/browserconfig.xml` file and tile images #1481

Add `/browserconfig.xml` file and tile images #1481